<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="客户名称" prop="customerId">
          <el-select v-model="queryParams.customerId" placeholder="请选择客户" clearable filterable>
            <el-option
              v-for="dict in sys_com_query"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="合同日期">
          <el-date-picker
            v-model="daterangeSignDate"
            style="width: 240px"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input
            v-model="queryParams.materialName"
            placeholder="请输入物料名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            :icon="Download"
            @click="handleExport"
          >导出</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="contractDetailList">
        <el-table-column label="合同id" align="center" prop="contractId" />
        <el-table-column label="合同编号" align="center" prop="contractNo" />
        <el-table-column label="客户名称" align="center" prop="customerName" />
        <el-table-column label="合同金额" align="center" prop="contractAmount" />
        <el-table-column label="签订日期" align="center" prop="signDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.signDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="物料名称" align="center" prop="materialName" />
        <el-table-column label="型号" align="center" prop="materialModel" />
        <el-table-column label="规格" align="center" prop="materialSpecification" />
        <el-table-column label="单价" align="center" prop="price" />
        <el-table-column label="订货数量" align="center" prop="quantity" />
        <el-table-column label="应收金额" align="center" prop="amount" />
        <el-table-column label="退款金额" align="center" prop="returnTotal" />
      </el-table>
      
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script setup name="SaleBookReport">
  import { ref, reactive, onMounted } from 'vue'
  import { getCurrentInstance } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Search, Refresh, Download } from '@element-plus/icons-vue'
  import { listSaleBook, exportSaleBook } from "@/api/saleReport/saleBook"
  import { parseTime } from '@/utils/ruoyi'
  
  const { proxy } = getCurrentInstance()
  const { sys_com_query } = proxy.useDict("sys_com_query")
  
  // 遮罩层
  const loading = ref(true)
  // 显示搜索条件
  const showSearch = ref(true)
  // 总条数
  const total = ref(0)
  // 销售合同明细表格数据
  const contractDetailList = ref([])
  // 签订日期时间范围
  const daterangeSignDate = ref([])
  // 查询参数
  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    contractId: null,
    contractNo: null,
    orderId: null,
    orderNo: null,
    customerId: null,
    signDate: null,
    customerName: null,
    materialId: null,
    materialName: null,
    params: {}
  })
  
  const queryFormRef = ref()
  
  /** 查询销售合同明细列表 */
  const getList = () => {
    loading.value = true
    queryParams.params = {}
    if (daterangeSignDate.value && daterangeSignDate.value.length > 0) {
      queryParams.params["beginSignDate"] = daterangeSignDate.value[0]
      queryParams.params["endSignDate"] = daterangeSignDate.value[1]
    }
    listSaleBook(queryParams).then(response => {
      contractDetailList.value = response.rows
      total.value = response.total
      loading.value = false
    })
  }
  
  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNum = 1
    getList()
  }
  
  /** 重置按钮操作 */
  const resetQuery = () => {
    daterangeSignDate.value = []
    proxy?.resetForm("queryFormRef")
    handleQuery()
  }
  
  /** 导出按钮操作 */
  const handleExport = () => {
    ElMessageBox.confirm('是否确认导出所有销售台账数据项?', "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      return exportSaleBook(queryParams)
    }).then(response => {
      proxy?.download(response.msg)
    })
  }
  
  onMounted(() => {
    getList()
  })
  </script>